<template>
  <CloudDialog
    v-model:visible="visible"
    :loading="loading"
    title=""
    :width="550"
    :mask-closable="false"
    :hide-title="true"
    :footer="false"
    :before-close="handleClose">
    <div class="upgrade-detail">
      <div class="upgrade-detail-logo">
        <img src="@/assets/images/logo.png" class="w-[78px] h-5" calt="" />
      </div>
      <div class="upgrade-detail-status">
        <div v-if="status === 0" class="upgrade-icons">
          <div class="upgrade-detail-icons">
            <i-icons-loading class="rotate-infinite" size="40px" />
          </div>
          <div class="upgrade-detail-tip">系统升级中，请稍后......</div>
        </div>
        <div v-if="status === 2" class="upgrade-icons">
          <div class="upgrade-detail-icons">
            <i-icons-new-success size="40px" />
          </div>
          <div class="upgrade-detail-tip">系统升级成功</div>
          <a-button @click="handleOk">好的</a-button>
        </div>
        <div v-if="status === 1" class="upgrade-icons">
          <div class="upgrade-detail-icons">
            <i-icons-new-fail size="40px" />
          </div>
          <div class="upgrade-detail-tip">系统升级失败</div>
          <a-button @click="handleClose">关闭</a-button>
        </div>
      </div>
    </div>
  </CloudDialog>
</template>
<script lang="ts" setup>
const loading = ref<boolean>(false)
const visible = defineModel<boolean>('visible', { required: true })
const status = defineModel<number>('status', { required: true, default: 0 })
const handleOk = () => {
  visible.value = false
  window.location.reload()
}
const handleClose = () => (visible.value = false)
</script>

<style scoped lang="less">
.upgrade-detail {
  display: flex;
  padding: 56px 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 64px;
  flex-shrink: 0;
  .upgrade-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    .upgrade-detail-tip {
      color: var(---color-text-2, #393c40);
      font-size: 14px;
      line-height: 22px; /* 157.143% */
    }
  }
}
</style>
